<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Computed Option 计算选项</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
    <h1>Computed Option 计算选项</h1>
    <hr>
    <div id="app">
        <p>{{newPrice}}</p>
        <ul>
            <li v-for="item in reverseNews">{{item.title}}-{{item.date}}</li>
        </ul>
    </div>
    <script type="text/javascript">
        var newsList=[
            {title:'就会形成覆盖到韩国',date:'2017/04/12'},
            {title:'借古讽今管理框架的来得快',date:'2017/04/18'},
            {title:'大公开了估计结果来看',date:'2017/04/25'},
            {title:'你活该死就够了',date:'2017/05/12'},
        ]; //数组
        var app=new Vue({
            el:'#app',
            data:{
                price:100,
                newsList:newsList
            },
            computed:{//对原数据进行改造输出，包括格式的编辑、大小写转换、顺序重排、添加符号...
                newPrice:function(){
                    return this.price='￥'+this.price+'元';
                },
                reverseNews:function(){
                    return this.newsList.reverse();//反转数组
                }
            }
        }) 
    </script>
</body>
</html>